<template>
  <div class="dashboard">
    <el-card>
      <template slot="header">
        <div class="card-header">
          <span>Dashboard</span>
          <div class="header-actions">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            ></el-date-picker>
            <el-button type="primary" size="small" class="ml-2">刷新</el-button>
          </div>
        </div>
      </template>
      
      <div class="dashboard-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalUsers }}</div>
                <div class="stat-label">总用户数</div>
                <div class="stat-change">+{{ stats.userGrowth }}% <small>vs 上月</small></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.activeUsers }}</div>
                <div class="stat-label">活跃用户</div>
                <div class="stat-change">+{{ stats.activeGrowth }}% <small>vs 上月</small></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.visits }}</div>
                <div class="stat-label">访问量</div>
                <div class="stat-change">+{{ stats.visitGrowth }}% <small>vs 上月</small></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.conversion }}%</div>
                <div class="stat-label">转化率</div>
                <div class="stat-change">-{{ stats.conversionChange }}% <small>vs 上月</small></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <el-divider></el-divider>
      
      <div class="dashboard-charts">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="chart-card">
              <template slot="header">
                <div class="card-header">
                  <span>用户增长趋势</span>
                </div>
              </template>
              <div class="chart-container">
                <!-- 这里是图表容器，实际项目中可以使用 ECharts 等 -->
                <div class="chart-placeholder">用户增长趋势图表</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template slot="header">
                <div class="card-header">
                  <span>访问来源分布</span>
                </div>
              </template>
              <div class="chart-container">
                <!-- 这里是图表容器 -->
                <div class="chart-placeholder">访问来源分布图</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <el-divider></el-divider>
      
      <div class="recent-activities">
        <el-card>
          <template slot="header">
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-table :data="activities" style="width: 100%">
            <el-table-column prop="time" label="时间" width="180"></el-table-column>
            <el-table-column prop="user" label="用户" width="180"></el-table-column>
            <el-table-column prop="action" label="操作" width="300"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
                  {{ scope.row.status === 'success' ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      dateRange: null,
      stats: {
        totalUsers: '12,843',
        userGrowth: 12.5,
        activeUsers: '5,342',
        activeGrowth: 8.2,
        visits: '48,921',
        visitGrowth: 15.8,
        conversion: 24.5,
        conversionChange: 2.3
      },
      activities: [
        {
          time: '2025-08-28 14:30',
          user: '张三',
          action: '更新了个人资料',
          status: 'success'
        },
        {
          time: '2025-08-28 14:15',
          user: '李四',
          action: '提交了订单 #20250828001',
          status: 'success'
        },
        {
          time: '2025-08-28 13:45',
          user: '王五',
          action: '尝试登录系统',
          status: 'danger'
        },
        {
          time: '2025-08-28 13:30',
          user: '赵六',
          action: '创建了新的项目',
          status: 'success'
        },
        {
          time: '2025-08-28 13:00',
          user: '钱七',
          action: '上传了5个文件',
          status: 'success'
        }
      ]
    }
  },
  mounted() {
    console.log('Dashboard page mounted')
    this.loadDashboardData()
  },
  methods: {
    loadDashboardData() {
      // 在实际项目中，这里会从API获取数据
      // 模拟数据加载
      setTimeout(() => {
        console.log('Dashboard data loaded')
      }, 1000)
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  align-items: center;
}

.ml-2 {
  margin-left: 8px;
}

.dashboard-stats {
  margin: 20px 0;
}

.stat-card {
  height: 120px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.stat-content {
  text-align: center;
  width: 100%;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  color: #52c41a;
}

.stat-change.negative {
  color: #f5222d;
}

.dashboard-charts {
  margin: 20px 0;
}

.chart-card {
  height: 300px;
}

.chart-container {
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  font-size: 16px;
  color: #999;
  text-align: center;
}

.recent-activities {
  margin-top: 20px;
}
</style>